<template>
    <div class="userchar">
        <areaVue ref="chart" :data="_data" :height="280" :chart-cfg="{ padding: [35, 35, 70, 50] }"
            :charstyle="{ lineJoin: 'round', lineCap: 'round' }"
            :color="['l(180) 0:#FCF100  1:#F5A300', 'l(180) 0:#FE8B16  1:#F84228']" :tooltip="_tooltip">
        </areaVue>
        <div class="label row">
            <div class="label-1 float-start row col">
                <div class="col text-right">
                    <span>{{ name[0] }} </span>
                </div>
                <div class="col text-left">
                    <div class="label-color label-color1"></div>
                </div>
            </div>
            <div class="label-1 float-start row col" v-show="name.length === 2">
                <div class="col text-right">
                    <span>观看视频数</span>
                </div>
                <div class="col text-left">
                    <div class="label-color label-color2"></div>
                </div>
            </div>
            <div class="float-none">

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { TooltipCallback } from '@antv/g2/lib/interface';
import { forEach, uniq } from 'lodash-es';
import moment from 'moment';
import { computed } from 'vue';
import areaVue from '../../../components/antv/area.vue'
import { IDate } from '../../../interface';
import dayjs from 'dayjs'
const p = defineProps<{ data: IDate[] }>()



const data = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']

const name = computed(() => {
    const t = uniq(p.data.map(e => e.type))
    return t
})

const _data = computed<IDate[]>(() => {
    const type: string[] = []
    const c = dayjs().add(1, 'months').get('months')
    const d = [...data.slice(c, 12), ...data.slice(0, c)]
    forEach(p.data, e => {
        if (e.type && !type.includes(e.type)) {
            type.push(e.type)
        }
    })
    if (!type.length) {
        return d.map(e => {
            return {
                type: '',
                count: 0,
                day: e + '月'
            }
        })
    } else {
        const obj: IDate[] = []
        forEach(type, e => {
            d.forEach(d => {
                const t = p.data.find(z => z.type === e && d === z.day)
                obj.push({ type: e, day: d + '月', count: t?.count || 0 })
            })
        })
        return obj
    }
})

const _tooltip: TooltipCallback = (day, count, type) => {
    const title1 = moment(day, 'MM').format('MM月')
    const title2 = moment(day, 'MM').format('MM-DD')
    const title3 = moment(day, 'MM').add(1, 'M').format('MM-DD')
    const data = {
        title: `${title1} (${title2} - ${title3})`,
        value: count,
        name: type
    }
    return data
}

</script>

<style scoped>
.userchar {
    position: relative;
}

.label {
    position: absolute;
    width: 450px;
    bottom: 0;
    left: calc(calc(100% - 450px) * 0.5);
    color: #fff;
    font-size: 12px;
}

.label-1 {
    width: 220px;
    margin: 0 auto;
}

.label-color {
    width: 66px;
    height: 2.5px;
    flex: none;
    order: 1;
    flex-grow: 0;
    margin-top: 5px;
}

.label-color1 {
    background: linear-gradient(180deg, #FCF100 0%, #F5A300 100%);
    box-shadow: 0px 4px 4px rgba(255, 245, 0, 0.5);
}

.label-color2 {
    background: linear-gradient(180deg, #FE8B16 0%, #F84228 100%);
    box-shadow: 0px 4px 4px rgba(255, 153, 0, 0.5);
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}
</style>